<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>中华人民共和国中央人民政府网</title>
    <script src="../js/vue.min.js"></script>
    <link rel="stylesheet" href="../elementUI/index.css">
    <script src="../elementUI/index.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <!--<script src="../js/alldatas.js"></script>-->
    <script src="../js/axios.min.js"></script>
    <style>
        .el-header,
        .el-footer {
            background-color: #2b2e32;
            color: #ffffff;
            text-align: center;
            line-height: 60px;
        }

        body {
            margin: 0;
        }

        #app {
            width: 100%;
            height: 90vh;
        }

        #header {
            text-align: right;
            font-size: 20px;
        }

        .el-aside {
            background-color: #545c64;
            line-height: 20px;
            width: 200px;
        }

        .el-main {
            background-color: #ffffff;
            color: #000000;
            text-align: center;
            line-height: 160px;
            height: 835px;
        }
    </style>
</head>

<body>
<div id="app">
    <el-container>
        <el-header id="header">
            <span>用户名</span>
            <i class="el-icon-setting">
                <a href=""></a>
            </i>
        </el-header>
        <el-container>
            <el-aside class="el-aside" style="width: 250px">
                <h1 style="text-align: center;font-size: 30px;color: #ffffff">后台管理系统</h1>
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                         @select="handleSelect"
                         background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/user">用户管理</el-menu-item>
                            <el-menu-item index="/role">角色管理</el-menu-item>
                            <el-menu-item index="/limit">权限管理</el-menu-item>
                            <el-menu-item index="/log">日志管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>导航二</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="product/product-list.html">产品管理</el-menu-item>
                            <el-menu-item index="/order">订单管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe id="nr" width="100%" :src="url" height="90%" frameborder="0"></iframe>
            </el-main>
        </el-container>
    </el-container>

</div>
</body>
<script>
    var v1 = new Vue({
        el: '#app',
        data: {
            url: '../img/bg1.png'
        },
        methods: {
            handleOpen(key, keyPath) {
                //console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                //console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                //console.log(key, keyPath);
                this.url = key;
            }
        }
    })
</script>
